<template>
  <div class="change-class body-bg" :class="{noScroll:showPop}">
    <div v-if="!initLoading">
      <!-- top -->
      <div class="top">
        <swiper class="my-swiper" easing-function="linear" circular="true" :indicator-dots="indicatorDots" autoplay="true" :interval="3000" indicator-color="#ccc" indicator-active-color="#00B8EE">
          <swiper-item v-for="(item,index) in classDetail.banner" :key="index">
            <img :src="item" alt="banner">
          </swiper-item>
        </swiper>
        <p class="overflow-one class-title">{{classDetail.name}}</p>
        <ul class="class-info">
          <li>
            <p v-if="from == '3'" class="discount-price">￥{{classDetail.discountPrice}}</p>
            <p v-else class="discount-price">积分：{{classDetail.jifen}}</p>
            <p class="class-tip">自取</p>
          </li>
          <li class="kucun">商品库存：120</li>
        </ul>
      </div>
      <!-- 课程信息 -->
      <div class="class-information">
        <p class="title">商品详情</p>
        <div class="information-cont">
          1、这里是商品详情文字。 2、这里是商品详情文字这里是商品详情文字。 3、这里是商品详情文字这里是商品详情文字这里是商。
        </div>
      </div>
      <!-- 点击购买 -->
      <div class="submit-cont" @click="showClassDet">
        <div class="submit-btn">{{from == '3' ? "点击购买" : "点击兑换"}}</div>
      </div>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
    <!-- pop -->
    <van-popup
      :overlay="true"
      :show="showPop"
      closeable
      position="bottom"
      custom-style="width:100%;height:50%"
      @close="onClosePop"
    >
      <div class="class-information">
        <p class="title">{{ from =='3' ? "购买数量" : "兑换数量" }}</p>
        <div class="cont">
          {{ from =='1' ? "购买数量" : "兑换数量" }}
          <van-stepper :value="number" @change="onChange" />
        </div>
        <!-- 点击购买 -->
        <div class="submit-cont" @click="goOrder">
          <div class="submit-btn">{{from == '3' ? "点击购买" : "点击兑换"}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import store from '@/store/globalStore'
export default {
  data() {
    return {
      from: "", // 记录路由来源 3 购买 4 兑换
      isChaBan: false, // 是否是插班
      fromTaoList: false,
      indicatorDots: false, // 是否显示指示点，如果banner图多于1张则显示，否则默认不显示
      initLoading: true, // 初始加载
      number: 1, // 购买数量
      popTitle: "", // 弹窗标题
      showPop: false, // 展示弹窗
      classDetail: {
        banner: ["https://img.yzcdn.cn/vant/cat.jpeg", "https://img.yzcdn.cn/vant/cat.jpeg"],
        name: "半年-60分钟课程-U6班",
        price: "599",
        qingjia: "59",
        jifen: 3000,
        discountPrice: "500",
        tips: "随时插班",
        state: 1, // 是否开课 1是 2否
        isTao: 1, // 是否有套餐
        teacherName: "张老师",
        classDate: "2020-01-31 至 2020-12-31",
        week: "周六",
        time: "09：30 - 10：30",
        address: "北京市海淀区001",
      }
    }
  },
  onLoad(e) {
    // url中传递了from参数 3 购买 4 兑换
    this.from = e.from;
  },
  onUnload() {
    this.number = 1;
    this.showPop = false;
  },
  onShow() {
    setTimeout(() => {
      this.initLoading = false;
    }, 1500);
    this.getDet();
  },
  methods: {
    getDet(){
      if(this.classDetail.banner.length>1){
        this.indicatorDots = true;
      }
    },
    // 查看/关闭课程详情
    showClassDet() {
      this.showPop = true;
    },
    onClosePop() {
      this.showPop = false;
    },
    // 设置购买数量
    onChange(e) {
      this.number = e.mp.detail;
    },
    // 下单
    goOrder(from) {
      from = this.from;
      wx.navigateTo({
        url: `/pages/signUpOrder/main?from=${from}`
      })
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  &.noScroll{
    height: 100vh;
    overflow: hidden;
  }
  .top{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    .my-swiper{
      width: 100%;
      height: 150px;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .class-title{
      width: 100%;
      font-size: 18px;
      color: #515151;
      margin-top: 15px;
    }
    .class-info{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 10px;
      .kucun{
        font-size: 14px;
        color: #101010;
        margin-bottom: 12px;
      }
      .discount-price{
        font-size: 18px;
        color: #FF3032;
      }
      .class-tip{
        padding: 2px 8px;
        border: 1px solid rgba(0,183,238,1);
        border-radius: 8px;
        font-size: 12px;
        color: #00B7EE;
        margin: 10px 0 12px 0;
        display: inline-block;
      }
      .class-icon{
        width: 20px;
        height: 20px;
        display: block;
        margin: 0 auto;
      }
      .class-state{
        font-size: 12px;
        color: #FF3032;
        margin-top: 8px;
      }
    }
  }
  .taocan{
    width: 100%;
    padding: 14px 25px 14px 14px;
    box-sizing: border-box;
    background: #DAF6FF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      align-items: center;
      .icon-taocan{
        width: 26px;
        height: 26px;
        display: block;
      }
      .tip-text{
        font-size: 14px;
        color: #00B7EE;
        margin-left: 10px;
      }
    }
    .icon-more{
      width: 20px;
      height: 5px;
      display: block;
    }
  }
  .class-information{
    width: 100%;
    margin-top: 10px;
    .cont{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 14px;
      box-sizing: border-box;
      font-size: 14px;
      color: #999;
    }
    .title{
      width: 100%;
      line-height: 54px;
      padding: 0 14px;
      box-sizing: border-box;
      background: #fff;
      font-size: 16px;
      color: #525252;
      margin-bottom: 10px;
    }
    .information-cont{
      width: 100%;
      background: #fff;
      padding: 15px 25px 15px 20px;
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: 10px;
      font-size: 14px;
      color: #444;
      .information-items{
        width: 100%;
        padding: 12px 0;
        display: flex;
        align-items: center;
        &:last-child{
          border-bottom: 0;
        }
        .items-label{
          min-width: 74px;
          width: 74px;
          font-size: 14px;
          color: #7A7A7A;
          border-right: 0.5px solid #dcdcdc;
          margin-right: 12px;
          line-height: 24px;
        }
        .items-span{
          flex-grow: 1;
          font-size: 14px;
          color: #101010;
        }
        .icon-more{
          width: 20px;
          height: 5px;
          display: block;
        }
      }
    }
  }
  .price-infor{
    width: 100%;
    padding: 15px 25px 20px 25px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 10px;
    li{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      color: #676767;
      font-size: 14px;
      span{
        color: #000;
      }
      &:last-child{
        margin-bottom: 0;
      }
    }
    .yingfu{
      color: #676767;
      font-weight: bold;
      span{
        color: #FF3333;
      }
    }
  }
  .submit-cont{
    width: 100%;
    padding: 60px 18px;
    box-sizing: border-box;
    background: #fff;
    .submit-btn{
      width: 100%;
      height: 44px;
      line-height: 44px;
      background:rgba(0,184,238,1);
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>
